import React, { Component } from 'react'
import { Input, Form, Icon, Button } from 'antd'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import PropTypes from 'prop-types'

import style from './login.css'

const FormItem = Form.Item

class IndexFrom extends Component {
  static propTypes = {
    form: PropTypes.object,
    login: PropTypes.func
  }
  constructor (props) {
    super(props)
    this.state = {}
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  // 登录
  handleSubmit () {
    const { validateFields } = this.props.form
    validateFields((err, values) => {
      if (!err) {
        this.props.login(values)
      }
    })
  }

  render () {
    const { getFieldDecorator } = this.props.form
    return (
      <div className={style['login']}>
        <div className={style['header']} />
        <div className={style['footer']} />
        <div className={style['login-form']}>
          <div className={style['name']}>积墨后台业务管理系统</div>
          <div className={style['en-name']}>Business Management System</div>
          <Form>
            <FormItem style={{ marginBottom: '30px' }}>
              {getFieldDecorator('workNumber', {
                rules: [{ required: true, message: '请输入用户名称' }]
              })(
                <Input
                  prefix={<Icon type='user' />}
                  className={style['common-width']}
                  placeholder='请输入用户名称'
                />
              )}
            </FormItem>
            <FormItem style={{ marginBottom: '30px' }}>
              {getFieldDecorator('password', {
                rules: [{ required: true, message: '请输入登陆密码' }]
              })(
                <Input
                  prefix={<Icon type='lock' />}
                  className={style['common-width']}
                  type='password'
                  placeholder='请输入登陆密码'
                />
              )}
            </FormItem>
            <Button
              type='primary'
              className={style['common-width']}
              onClick={this.handleSubmit}
            >
              登录
            </Button>
          </Form>
        </div>
      </div>
    )
  }
}

const mapState = state => ({})
const mapDispatch = dispatch => ({
  login: dispatch.common.login
})
const Index = Form.create()(IndexFrom)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(Index)
)
